<template>
  <div class="edit-groups">
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item v-for="(item, index) in editGroups" :key="index" :name="`item-${index}`">
        <template #title>
          <span class="title">{{ item.text }}</span>
        </template>
        <!-- <h1>{{ item.text }}</h1> -->
        <!-- <pre>{{ item.items }}</pre>
        <pre>{{ item.props }}</pre> -->
        <props-table :props="item.props" @change="handleChange" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
export interface GroupProps {
  text: string
  items: string[]
}
const defaultEditGroups: GroupProps[] = [
  {
    text: '尺寸',
    items: ['height', 'width', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
  },
  {
    text: '边框',
    items: ['borderStyle', 'borderColor', 'borderWidth', 'borderRadius']
  },
  {
    text: '阴影与透明度',
    items: ['opacity', 'boxShadow']
  },
  {
    text: '位置',
    items: ['left', 'top']
  },
  {
    text: '事件功能',
    items: ['actionType', 'url']
  }
]
</script>

<script lang="ts" setup>
import { AllComponentProps } from '@isameng/lowcode-components'
import { difference } from 'lodash-es'

const props = withDefaults(
  defineProps<{
    props: AllComponentProps
    groups?: Array<GroupProps>
  }>(),
  {
    groups: () => defaultEditGroups
  }
)

const emits = defineEmits(['change'])

const activeNames = ref('item-0')

const newGroups = computed(() => {
  const allNormalProps = props.groups.reduce((prev, current) => {
    return [...prev, ...current.items]
  }, [] as string[])

  // difference 以前面的数组为基准，找到不同的项
  const specialProps = difference(Object.keys(props.props), allNormalProps)
  return [{ text: '基本属性', items: specialProps }, ...props.groups]
})

const editGroups = computed(() => {
  return newGroups.value.map(group => {
    const propsMap = {} as AllComponentProps
    group.items.forEach(item => {
      propsMap[item] = props.props[item]
    })
    return {
      ...group,
      props: propsMap
    }
  })
})

const handleChange = (e: any) => {
  emits('change', e)
}
</script>
<style lang="scss" scoped>
.edit-groups {
  .title {
    padding-left: 12px;
  }
  :deep(.el-collapse-item__content) {
    padding-bottom: 10px !important;
  }
}
</style>
